<template>
  <div class="second-step-wrapper">
    <div class="header">
      <div class="header-title">
        <span class="title-text">选择你的产业</span>
      </div>
    </div>
    <div class="form-box" v-loading="loading">
      <div class="industry-list">
        <div class="header">
          <div
            v-for="(item, index) in titleList"
            :key="index"
            :class="'header-item-' + index"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="industry-container">
          <div class="first-level">
            <div
              :class="[
                'first-item',
                { active: firstActive.industryName == item.industryName },
              ]"
              v-for="(item, index) in firstColumn"
              :key="index"
              @click="handleClickFirst(item)"
            >
              {{ item.industryName }}
            </div>
          </div>
          <div class="second-level">
            <div
              :class="[
                'second-item',
                { active: secondActive.industryName == item.industryName },
              ]"
              v-for="(item, index) in secondColumn"
              :key="index"
              @click="handleClickSecond(item)"
            >
              {{ item.industryName }}
            </div>
          </div>
          <div class="third-level">
            <div
              :class="[
                'third-item',
                {
                  active: thirdActive.industryName === item.industryName,
                },
              ]"
              v-for="(item, index) in thirdColumn"
              :key="index"
              @click="handleClickThird(item)"
            >
              {{ item.industryName }}
              <img
                class="icon"
                :src="
                  thirdActive.industryName === item.industryName
                    ? selected
                    : noSelected
                "
                alt=""
              />
            </div>
          </div>
        </div>
      </div>

      <div class="btn-box">
        <div class="btn" @click="goLast">上一步</div>
        <div class="btn spe" @click="goNext">下一步</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useSubjectSelectStore } from '@/store/subjectSelect';
import { getIndustryTree } from '@/api/subjectSelect';
import noSelected from '@/assets/images/noSelected.png';
import selected from '@/assets/images/selected.png';
import { showToast } from 'vant';

const store = useSubjectSelectStore();

const emit = defineEmits(['goLast', 'goNext']);

const titleList = ref([
  {
    title: '一级产业',
  },
  {
    title: '二级产业',
  },
  {
    title: '三级产业',
  },
]);
const firstColumn = ref([]);
const secondColumn = ref([]);
const thirdColumn = ref([]);
const firstActive = ref({});
const secondActive = ref({});
const thirdActive = ref({});

const handleClickFirst = (item) => {
  firstActive.value = item;
  secondColumn.value = item.child;
  handleClickSecond(item.child[0]);
};

const handleClickSecond = (item) => {
  secondActive.value = item;
  thirdColumn.value = item.child;
};

const handleClickThird = (item) => {
  thirdActive.value = item;
};

const loading = ref(false);
const getIndustryTreeFn = async () => {
  try {
    loading.value = true;
    const params = {
      industryType: '10',
    };
    const res = await getIndustryTree(params);
    loading.value = false;
    if (res.code == 200) {
      firstColumn.value = res.data;
      handleClickFirst(res.data[0]);
    }
  } catch (error) {
    loading.value = false;
  }
};

onMounted(() => {
  getIndustryTreeFn();
});

const goLast = () => {
  emit('goLast');
};

const router = useRouter();
const goNext = () => {
  if (!thirdActive.value.id) {
    showToast('请先选择一个产业');
    return;
  }
  console.log('thirdActive.value.id', thirdActive.value.id);
  store.setIntelligenceIndustry(thirdActive.value);
  router.push({ name: 'CreateMap' });
};
</script>

<style scoped lang="scss">
.second-step-wrapper {
  width: 72vw;
  margin: 0 auto;
  .header {
    display: flex;
    .robot-icon {
      width: 136px;
      height: 120px;
      margin-right: 18px;
    }
    .header-title {
      display: flex;
      flex-direction: column;
      .title-text {
        font-weight: bold;
        font-size: 44px;
        color: #333;
        margin-bottom: 20px;
        white-space: nowrap;
      }
      .title-desc {
        font-weight: 400;
        font-size: 22px;
        color: #555555;
        white-space: nowrap;
      }
    }
  }
  .form-box {
    .btn-box {
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 300px;
        text-align: center;
        background: $primary-color;
        border-radius: 12px;
        font-weight: bold;
        font-size: 26px;
        color: #ffffff;
        margin-top: 40px;
        padding: 16px 0;
        &:nth-child(2) {
          margin-left: 32px;
        }
      }
      .spe {
        position: relative;
        background: linear-gradient(240deg, #597dff 0%, #9d19ff 100%);
      }
      .new-icon {
        position: absolute;
        top: -18px;
        right: 14px;
        width: 72px;
        height: 40px;
      }
    }
    .industry-list {
      height: calc(100vh - 500px);
      box-sizing: border-box;
      position: relative;
      border-radius: 32px;
      overflow: hidden;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 32px;
        padding: 2px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 1),
          rgba(206, 231, 245, 1)
        );
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
      }
      .header {
        position: sticky;
        top: 0;
        z-index: 100;
        height: 64px;
        background: #f0f2f6;
        display: flex;
        align-items: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28px;
        color: #666666;
        border-bottom: 1px solid $border-color;
        & > div {
          padding: 0 0 0 56px;
          box-sizing: border-box;
        }
        .header-item-0 {
          width: 300px;
        }
        .header-item-1 {
          width: 500px;
        }
        .header-item-2 {
          flex: 1;
        }
      }
      .industry-container {
        width: 100%;
        height: 100%;
        background: #ffffff;
        display: flex;
        font-size: 28px;
        .active {
          color: $primary-color;
          background: #f6fafe;
          font-weight: bold;
        }
        .first-level {
          width: 300px;
          height: 100%;
          overflow: scroll;
          padding-bottom: 78px;
          box-sizing: border-box;
          border-right: 2px solid $border-color;
          .first-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 78px;
            padding-left: 56px;
            box-sizing: border-box;
          }
        }
        .second-level {
          width: 540px;
          height: 100%;
          overflow: scroll;
          padding-bottom: 78px;
          box-sizing: border-box;
          border-right: 2px solid $border-color;
          .second-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 78px;
            padding-left: 56px;
            box-sizing: border-box;
          }
        }
        .third-level {
          flex: 1;
          height: 100%;
          overflow: scroll;
          padding-bottom: 78px;
          box-sizing: border-box;
          .third-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px 0 56px;
            box-sizing: border-box;
            height: 78px;
            .icon {
              width: 40px;
              height: 40px;
            }
          }
        }
      }
    }
  }
}
</style>
